/**
  * @description: 上拉下拉列表
  * @author: yingying.fan
  * @date: 2019/2/26 17:06
  */
import React, { PureComponent } from 'react'
import RefreshListView, { RefreshState } from 'react-native-refresh-list-view'

type Props = {
  data: Array<any>,
  renderItem: Function,
  getDataList: Function,

  // 以下是非必要的
  page?: Object, // 页面参数

  footerRefreshingText?: string,
  footerFailureText?: string,
  footerNoMoreDataText?: string,
  footerEmptyDataText?: string,

  footerRefreshingComponent?: any,
  footerFailureComponent?: any,
  footerNoMoreDataComponent?: any,
  footerEmptyDataComponent?: any
}

type State = {
  refreshState: number
}

export default class PullList extends PureComponent<Props, State> {
  static defaultProps = {
    footerRefreshingText: '正在加载…',
    footerFailureText: '点击重新加载',
    footerNoMoreDataText: '已加载全部',
    footerEmptyDataText: '暂时没有相关数据',
    page: {
      pageIndex: 1,
      pageSize: 10
    }
  }

  constructor (props) {
    super(props)

    this.pageIndex = this.props.page.pageIndex
    this.pageSize = this.props.page.pageSize
    this.state = {
      refreshState: RefreshState.Idle // 刷新状态
    }
  }

  componentWillMount () {
    this._onHeaderRefresh()
  }

  _getDataList = () => {
    this.props.getDataList(this.pageIndex, this.pageSize)
      .then(({ length, count }) => {
        if (this.pageIndex === 1) {
          this.pageIndex = 2
        } else {
          this.pageIndex++
        }

        let state
        if (length === 0) {
          // 无数据
          state = RefreshState.EmptyData
        } else if (length >= count) {
          // 已加载全部
          state = RefreshState.NoMoreData
        } else {
          // 普通
          state = RefreshState.Idle
        }
        this.setState({
          refreshState: state
        })
      })
      .catch(() => {
        // 获取数据失败
        this.setState({
          refreshState: RefreshState.Failure
        })
      })
  }

  _keyExtractor = (item: any, index: number) => {
    return index.toString()
  }

  _onHeaderRefresh = () => {
    this.pageIndex = 1
    this.setState({
      refreshState: RefreshState.HeaderRefreshing
    }, () => {
      this._getDataList()
    })
  }

  _onFooterRefresh = () => {
    this.setState({
      refreshState: RefreshState.FooterRefreshing
    }, () => {
      this._getDataList()
    })
  }

  _scrollToTop = () => {
    // this._getFlatList().scrollToIndex({ viewPosition: 0 })
    this._getFlatList().scrollToOffset({ offset: 0 })
  }

  _getFlatList = () => {
    return this.refs.refreshList.refs.refreshFlatList
  }

  render () {
    let { page, ...rest } = this.props
    // data={this.props.data}
    // renderItem={this.props.renderItem}
    // footerRefreshingText={this.props.footerRefreshingText}
    // footerFailureText={this.props.footerFailureText}
    // footerNoMoreDataText={this.props.footerNoMoreDataText}
    // footerEmptyDataText={this.props.footerEmptyDataText}
    return (
      <RefreshListView
        ref="refreshList"
        listRef="refreshFlatList"
        refreshState={this.state.refreshState}
        keyExtractor={this._keyExtractor}
        onHeaderRefresh={this._onHeaderRefresh}
        onFooterRefresh={this._onFooterRefresh}
        {...rest}
      />
    )
  }
}